<!-- 聊天背景 -->
<template>
  <div id="ChatBackground">
    <!-- 头部 -->
    <Head title="聊天背景" BackType1="true"></Head>
    <!-- 主体 -->
    <div id="Main">
      <!-- <div class="Items"> -->
      <van-uploader class="Items" :after-read="onRead">
        <span>从本地相册中选择</span>
        <img src="../assets/img/arrowIcon.png" alt>
      </van-uploader>
      <!-- </div> -->
      <div class="imgBox">
        <div v-for="(item,index) in imgList" @click="choose(item,index)">
          <img :src="item.imgsrc" alt>
          <span class="icon" v-show="item.active"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "../components/Head.vue";
import Img from "../assets/img/loginWrap_bg.png";
import { Uploader } from "vant";
import configUrl from '../untils/configUrl';
export default {
  data() {
    return {
      active: false,
      imgList: []
    };
  },
  components: {
    Head,
    Img,
    [Uploader.name]: Uploader
  },
  methods: {
    choose(item, index) {
      this.$nextTick(function() {
        this.imgList.forEach(item => {
          this.$set(item, "active", false);
        });
        this.$set(item, "active", true);
      });
    },
    onRead(file, detail) {
      this.$toast(detail.name);
    }
  },
  mounted(){
    /**
      *  get  默认聊天背景
      */
    this.$get(urlConfig.backgroundDefaultimg)
      .then(res => {
        this.imgList = res.data.list
      })
  }
};
</script>

<style lang="less" scoped>
#ChatBackground {
  font-size: 28px;
  #Main {
    position: fixed;
    top: 88px;
    overflow: scroll;
    width: 100%;
    .Items {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      margin-bottom: 10px;
      padding-left: 30px;
      padding-right: 30px;
      background-color: #ffffff;
      span {
        font-size: 34px;
        color: #323232;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        padding-top: 29px;
        padding-bottom: 27px;
      }
      img {
        width: 16px;
        height: 25px;
      }
    }
    .imgBox {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      background-color: #ffffff;
      padding-top: 20px;
      div {
        width: 210px;
        height: 360px;
        margin-bottom: 30px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        .icon {
          display: block;
          width: 46px;
          height: 46px;
          position: absolute;
          right: 20px;
          bottom: 20px;
          background: url("../assets/img/determine.png") no-repeat;
          background-size: auto 100%;
        }
      }
    }
  }
}
</style>
